<template>
	<view v-if="Object.keys(Songdetail).length!==0" v-show="!isloding">
		<!-- :style="{ 'background-image':'url('+playlist.coverImgUrl+')'}" -->
		<view  v-if="Songdetail.al.picUrl.length" class="fixbg" :style="{ 'background-image':'url('+Songdetail.al.picUrl+')'}"></view>
		<MusicHeader :title="Songdetail.name" :icon="true" color="white"/>
		<scroll-view scroll-y="true">
			<view class="playb" @tap="handletoplay">
				<image 
				:src="Songdetail.al.picUrl" 
				:class="{'detail-play-run':isPlayRotate}"
				 
				></image>
				<text class="iconfont " :class="iconplay"></text>
				<view></view>
			</view>
			<view class="lyric">
				<view class="detaillyric" :style="{transform:'translateY('+ -(lyricindex-1)*82+'rpx)'}">
					<view class="lyric-item" 
					:class="{active :lyricindex===index}" 
					v-for="(item,index) in Songlyric" 
					:key="index"
					>{{item.lyric}}</view>
				</view>
			</view>
			<button class="list-share" open-type="share">
				<text  class="iconfont icon-fenxiang"></text>
				分享给微信好友
			</button>
			<view class="similarlove-header">
				<view>喜欢这首歌的人也听</view>
				<view>
					<text class="iconfont icon-a-24gf-playCircle"></text>
					一键收听
				</view>
			</view>
			<!-- v-for="(item,index) in playlist.tracks"  @tap="handletodetailed(item.id)" -->
			<view class="SongList-item" v-for="(item,index) in Songsimis " :key="index" @tap="handletoplaysimi(item.id)">
				<view class="Songimg"><image :src="item.album.picUrl" mode=""></image></view>
				<view class="SongList-item-song">
					<view class="SongList-item-song-name">
						{{item.name}}
					</view>
					
					<view class="SongList-item-singer">
						<image v-if="item.privilege.flag >60 && item.privilege.flag<70" src="../../static/vip.jpg" mode=""></image>
						<image v-if="item.privilege.maxbr ===999000" src="../../static/sq.jpg" mode=""></image>
						<view>{{item.artists[0].name}}-{{item.name}}</view>
					</view>
				</view>
				<text class="iconfont icon-bofang"></text>
			</view>
			
			<view class="d-comments">
				<view class="d-comments-header">
					精彩评论
				</view>
				<view class="d-comments-header-item" v-for="(item,index) in Songcomment" :key='index' >
					<view class="d-comments-user">
						<view class="d-comments-user-img">
							<image :src="item.user.avatarUrl" mode=""></image>
						</view>
						<view class="d-comments-userinfs">
							<view class="d-comments-user-name">
							{{item.user.nickname}}
							</view>
							<view class="d-comments-user-time">
								{{item.time | formatTime}}
							</view>
						</view>
						<view class="d-comments-user-count">
							{{item.likedCount | formatCount}}
							<text class="iconfont icon-dianzan"></text>
						</view>
					</view>
					<view class="d-comments-user-conent">{{item.content}}</view>
				</view>
				
				
			</view>
		</scroll-view>
		
	</view>
</template>

<script>
	import '../../common/iconfont.css'
	import MusicHeader from "../../components/MusicHeader/MusicHeader.vue"
	import {songdetail,songsimi,songcomment,lyric,songurl} from '../../common/api.js'
	export default {
		components:{MusicHeader},
		data() {
			return {
				Songdetail:{},
				Songsimis:[],
				Songcomment:[],
				Songlyric:[],
				lyricindex :0,
				iconplay:'icon-zanting',
				isPlayRotate:"true",
				isloding:true,
			}
		},
		onLoad(options){
			
			// songdetail(options.songid).then((res)=>{
			// 	console.log(res)
			// })
			console.log(options.songid)
			this.getmusic(options.songid)
			
		},
		onUnload(){
			this.cancelsetinterval()
			//退出销毁音乐播放控件
			// #ifdef H5
			this.bgAudioManager.destroy();
			// #endif
		},
		onHide() {
			this.cancelsetinterval()
			// // #ifdef H5
			// this.bgAudioManager.destroy();
			// // #endif	
		},
		methods: {
			getmusic(songid){
				this.$store.commit('NEXT_ID',songid)
				uni.showLoading({
					title:'loding'
				});
				this.isloding = true;
				Promise.all([songdetail(songid),songsimi(songid),songcomment(songid),lyric(songid),songurl(songid)]).then((res)=>{
					if(res[0][1].data.code===200){
						this.Songdetail = res[0][1].data.songs[0]
						// console.log(this.Songdetail+"nishi1")
						// console.log(res)
					}
					if(res[1][1].data.code=="200"){
						this.Songsimis = res[1][1].data.songs
						// console.log(this.Songsimis)
					}

					if(res[2][1].data.code=="200"){
						this.Songcomment = res[2][1].data.hotComments
						// console.log(this.Songcomment)
					}
					if(res[3][1].data.code=="200"){
						 let Songlyric = res[3][1].data.lrc.lyric;
						// console.log(this.Songlyric)
						let re =/\[([^\]]+)\]([^\[]+)/g;
						// console.log(Songlyric.match(re))
						  var resoult= [];
						
						
						Songlyric .replace(re,($0,$1,$2)=>{
							resoult.push({
								"time":this.formatTimetosec($1),
								"lyric":this.formatslice($2),
							});
							
						});
							this.Songlyric = resoult;
							console.log(this.Songlyric)
					}
					console.log(res)
					// #ifdef MP-WEIXIN
					this.bgAudioManager = uni.getBackgroundAudioManager();
					this.bgAudioManager.title = this.Songdetail.name;
					// #endif
					
					// #ifdef H5
					if(!this.bgAudioManager){
						this.bgAudioManager = uni.createInnerAudioContext();
					}
					this.iconplay = 'icon-bofang'
					this.isPlayRotate = false;
					// #endif
					
					if(res[4][1].data.code=="200"){

						this.bgAudioManager.src = res[4][1].data.data[0].url || ''
						this.listenLyricIndex();
						// 添加监听 控制播放时icon图标和图片旋转
						this.bgAudioManager.onPlay(()=>{
							this.iconplay = 'icon-zanting'
							this.isPlayRotate = true;
							//添加歌词监听事件，判断歌词的进度
							this.listenLyricIndex();
						});
						this.bgAudioManager.onPause(()=>{
							this.iconplay = 'icon-bofang'
							this.isPlayRotate = false;
							this.cancelsetinterval();
						}); 
						this.bgAudioManager.onEnded(()=>{
							this.getmusic(this.$store.state.nextId)
						})
						}
				this.isloding =false;
				uni.hideLoading()
				});
				
			},
			formatTimetosec(value){
				let arr = value.split(':');
				return (Number(arr[0]*60-1)+ Number(arr[1])).toFixed(1)
			},
			formatslice(value){return value.slice(0,value.length-2);},
			// 添加点击事件控制播放或暂停
			handletoplay(){
				if(this.bgAudioManager.paused){
					this.bgAudioManager.play();
				}
				else{
					this.bgAudioManager.pause()
				}
			},
			handletoplaysimi(songid){
				// 使用的跳转页面方法
				// uni.navigateTo({
				// 	url:"../songdedetailed/songdedetailed?songid="+songid
				// })
				// 使用更新数据的方法
				this.getmusic(songid)
			},
			// 歌词监听器
			listenLyricIndex(){
				clearInterval(this.time);
				this.time = setInterval(()=>{
					for(var i=0;i<this.Songlyric.length;i++){
						if(this.bgAudioManager.currentTime>this.Songlyric[this.Songlyric.length-1].time){
							this.lyricindex = this.Songlyric.length-1;
							break;
						}
						if(this.bgAudioManager.currentTime>this.Songlyric[i].time
						&& this.bgAudioManager.currentTime<this.Songlyric[i+1].time){
							this.lyricindex = i;
							// console.log(i)
							// console.log( this.Songlyric[i].time+58)
						}
					}
					// console.log(this.lyricindex)
				},100)
				
			},
			// 清楚定时器
			cancelsetinterval(){
				clearInterval(this.time)
			},
			
		}
	} 
</script>

<style scoped>
.fixbg{
	background-image: url(../../static/logo.png);
}
scroll-view{
	height: calc(100vh - 160rpx);
}
.playb{
	width: 580rpx;
	height: 580rpx;
	margin:220rpx auto 0 auto ;
	background-image: url(../../static/disc.png);
	background-size: cover;
	position: relative;
}
.playb image{
	width: 370rpx;
	height: 370rpx;
	border-radius: 50%;
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	margin: auto;
	animation: 10s linear move infinite;animation-play-state: paused;
}
 .playb .detail-play-run {
	 animation-play-state:running ;}
	 @keyframes move{
	 	from{transform:rotate(0deg);}
	 	to{transform: rotate(360deg);}
	 }
 
.playb text{
	width: 100rpx;
	height: 100rpx;
	color: #FFFFFF;
	font-size: 100rpx;
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	margin: auto;
}
.playb view{
	background-image: url(../../static/needle.png);
	width:230rpx;
	height: 360rpx;
	position: absolute;
	top: -650rpx;
	bottom: 0;
	left: 40rpx;
	right: 0;
	margin: auto;
	background-size: cover;
}

.lyric{
	font-size: 40rpx;
	line-height: 82rpx;
	height: 246rpx;
	text-align: center;
	overflow: hidden;
	color: #808080;
}
.detaillyric{transform: .5s;
}
.lyric-item{
	height: 82rpx;
}
.active{
	color: #007AFF;
}
.list-share{
	width: 336rpx;
	height: 70rpx;
	margin:40rpx 208rpx ;
	background-color: rgba(0,0,0,0.4);
	color: #FFFFFF;
	text-align: center;
	line-height: 70rpx;
	font-size: 26rpx;
	border-radius:100rpx;
}
.list-share text{
	height: 70rpx;
	line-height: 70rpx;
	margin-right: 10rpx;
	font-size: 40rpx;
}
.similarlove-header{
	display: flex;
	align-items:center;
	height: 116rpx;
	line-height: 116rpx;
	width:690rpx ;
	height: 120rpx;
	margin: 0 32rpx;
}
.similarlove-header view:nth-child(1) {
		color: #FFFFFF;
		font-size: 40rpx;
}
.similarlove-header view:nth-child(2) {
	width: 180rpx;
	height: 65rpx;
	margin-left: 120rpx;
	color: #FFFFFF;
	border-radius: 30rpx;
	line-height: 65rpx;
	border: 2rpx solid #FFFFFF;
	padding: 0 10rpx;
}
.similarlove-header view:nth-child(2) text{
	margin-right: 15rpx;
	font-size: 38rpx;
}

.SongList-item{
	display: flex;
	margin: 20rpx 35rpx 0 40rpx;
	align-items: center;
}
.Songimg{
	width: 85rpx;
	height: 85rpx;
	border-radius: 30rpx;
}
.Songimg image{
	width: 100%;
	height: 100%;
}
.SongList-item-song{
	width: 490rpx;
	line-height:rpx;
	margin-left:50rpx;
}
.SongList-item-song-name{
	width: 70vw;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	font-size: 30rpx;	
}
.SongList-item-singer{
	font-size: 22rpx;
	color: #a9a9a9;
	display: flex;
	align-items: center;
}
.SongList-item-singer view{
	width: 70vw;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.SongList-item-singer image{
	width:32rpx ;
	height: 20rpx;
	margin-right: 10rpx;
}
.SongList-item text{
	font-size: 50rpx;
	color:#a9a9a9;
}
.d-comments{
	width: 660rpx;
	margin: 20rpx 42rpx 0rpx 42rpx;
}
.d-comments-header{
height:170rpx;
line-height: 170rpx;
color: #FFFFFF;
font-size: 50rpx;
}
.d-commments-header-item{
	width: 100%;
	height: 145rpx	
}
.d-comments-user{
	height: 72rpx;
	display: flex;
	align-items: center;
}
.d-comments-user-img{
	width:64rpx;
	height: 64rpx;
	border: 50%;
}
.d-comments-user-img image{
	width: 100%;
	height: 100%;
}
.d-comments-userinfs{
	margin-left: 20rpx;
	width: 400rpx;
}
.d-comments-user-name{
	color: #808080;
	font-size:30rpx ;
}
.d-comments-user-time{
	color: #A9A9A9;
	font-size: 17rpx;
}
.d-comments-user-count{
	/* width: 198rpx; */
	color:#808080 ;
	font-size: 30rpx;
	margin-left: 112rpx;
}
.d-comments-user-conent{
	/* height: 74rpx; */
	color: #FFFFFF;
	font-size:32rpx ;
	border-bottom: 2rpx solid #555555;
	margin: 20rpx 0 20rpx 84rpx;
	padding-bottom: 20rpx;
}
</style>
